<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商场管理</el-breadcrumb-item>
      <el-breadcrumb-item>轮播图设置</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="add">
      <el-button type="primary" @click="show = true; dialogTitle = '添加轮播图'">添加轮播图</el-button>
    </div>
    <el-card>
      <el-table :data="productList" stripe border style="width: 100%">
        <el-table-column prop="name" label="图片">
          <template slot-scope="scope">
            <div class="img"><img width="100%" height="100%" :src="scope.row" alt=""></div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="danger" @click="delCommodity(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="上传轮播图" :visible.sync="show" @close="() => { resetForm('productForm') }">
      <el-form :model="productForm" :rules="productFormRules" ref="productForm">
        <el-form-item label="轮播图id" prop="index">
          <el-input type="number" el-input v-model="productForm.index" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="轮播图上传" prop="image">
          <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" ref="upload"
            :on-change="handleSuccess">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                  <i class="el-icon-download"></i>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="this.productForm.image" alt="">
          </el-dialog>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="() => { resetForm('productForm'); show = false; }">取 消</el-button>
        <el-button type="primary" @click="addCommodity" :loading='loading'>确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      dialogVisible: false,
      disabled: false,
      loading: false,
      productList: [],
      productForm: {
        index: "",
        image: "",
      },
      productFormRules: {
        index: [{ required: true, message: '请输入轮播图id', trigger: 'blur' }],
        image: [{ required: true, message: '请上传轮播图', trigger: 'blur' }],
      },
    }
  },
  created() {
    this.getComputed()
  },
  methods: {
    async getComputed() {
      const { data } = await this.$http.get('venue/banner')
      if (data.state !== 0) {
        return this.$message.error(data.msg)
      }
      this.productList = data.result
    },
    addCommodity() {
      this.$refs['productForm'].validate(async (valid) => {
        if (!valid) return
        this.loading = true
        let formDate = new FormData()
        for (const iterator of Object.keys(this.productForm)) {
          formDate.append(iterator, this.productForm[iterator])
        }
        const { data } = await this.$http.post('venue/banner', formDate)
        this.loading = false
        this.show = false
        this.resetForm('productForm')
        this.$refs.upload.clearFiles()
        this.getComputed()
        if (data.state !== 0) return this.$message.error(data.msg)
        return this.$message.success("上传成功")
      })
    },
    handleRemove(file) {
      this.$refs.upload.clearFiles()
    },
    handlePictureCardPreview(file) {
      this.dialogVisible = true;
    },
    handleSuccess(file) {
      this.productForm.image = file.raw;
    },
    handleDownload(file) {
      console.log(file);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$refs.upload.clearFiles()
    },
    delCommodity(img) {
      this.$confirm('是否删除该轮播图', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let index = img.split('http://127.0.0.1:39000/static/banner/')[1]
        const { data } = await this.$http.delete('venue/banner', { data: { index } })
        this.getComputed()
        if (data.state !== 0) return this.$message.error(data.msg)
        return this.$message.success("删除成功")
      })

    },
  }
}
</script>

<style scoped>
.add {
  display: flex;
  justify-content: flex-end;
}

.add .el-button {
  margin-bottom: 10px;
}

.img {
  width: 100%;
  height: 100%;
}

.img>img {
  object-fit: contain;
  max-height: 100px;
}
</style>